﻿Sys.Application.add_load(initImageExplorer);
var m_Explorer;
var m_Description;
var m_Text = {
    'dotnetnuke': 'DotNetNuke is an open-source project',
    'documents': 'Documentation for this site can be obtained by clicking the link in the upper right',
    'download': 'Downloads for this site can be obtained by clicking the link in the upper right',
    'menu': 'The DotNetNuke Menu control is an open-source ASP.NET WebControl that has a rich client-side object model and supports advanced featuresets like populate on demand and keyboard navigation.',
    'labeledit': 'The DotNetNuke Label Edit control is an open-source ASP.NET WebControl that allows any label to be editable on the client where it uses a client-callback to persist the changes. Simply specify a client-side event like onclick to allow the user to edit. It supports RichText and MultiLine editing. ',
    'tabstrip': 'The DotNetNuke Tab Strip control is an open-source ASP.NET WebControl that allows a page to be displayed in a tabular manner. It supports 3 rendering modes, including AJAX on-demand loading to allow for optimal performance. ',
    'textsuggest': 'The DotNetNuke Text Suggest control is an open-source ASP.NET WebControl that allows any textbox to suggest the results the user is looking for by dynamically populating a menu of matched items. ',
    'toolbar': 'The DotNetNuke ToolBar control is an open-source ASP.NET WebControl that allows a toolbar to be attached to any control.',
    'treeview': 'The DotNetNuke TreeView control is an open-source ASP.NET WebControl that has a rich client-side object model and supports advanced featuresets like populate on demand and keyboard navigation.'};

function initImageExplorer()
{
    m_Explorer = new MyCompany.ImageExplorer($get('divImageExplorer'));
    m_Description = $get('description');
}

Type.registerNamespace('MyCompany');
MyCompany.ImageExplorer = function(ctl)
{
    this.ctl = ctl;
    $addHandlers(this.ctl, {'click': this.onclick,
                            'mouseover': this.onmouseover,
                            'mouseout': this.onmouseout}, this);
}

MyCompany.ImageExplorer.prototype = 
{
    onclick: function(sender, arg)
    {
        var ctl = sender.target;
        if (ctl.tagName.toLowerCase() == 'img')
        {
            m_Description.style.display = '';
            m_Description.innerHTML = m_Text[ctl.id];
            var dims = new dnn.dom.positioning.dims(ctl);
            m_Description.style.top = dims.t + 'px';
            m_Description.style.left = dims.r + 'px';
            
            dnn.dom.animate(m_Description, dnn.motion.animationType.Slide, dnn.motion.animationDir.Right, 
                dnn.motion.easingType.Expo, dnn.motion.easingDir.easeInOut, 1, 1);
        }
    },
    onmouseover: function(sender, arg)
    {
        var ctl = sender.target;
        if (ctl.tagName.toLowerCase() == 'img')
        {
            //dnn.dom.doTween(ctl.src, ctl, 'top', dnn.easing.easeOutBounce, 0, -50, 1);//
            dnn.dom.doTween(ctl.src + 'h', ctl, 'height', dnn.easing.easeOutExpo, ctl.offsetHeight, ctl.offsetHeight + 50, 1, 10);
            dnn.dom.doTween(ctl.src + 'w', ctl, 'width', dnn.easing.easeOutExpo, ctl.offsetWidth, ctl.offsetWidth + 50, 1, 10);
        }
    },
    onmouseout: function(sender, arg)
    {
        var ctl = sender.target;
        if (ctl.tagName.toLowerCase() == 'img')
        {
            //dnn.dom.doTween(ctl.src, ctl, 'top', dnn.easing.easeOutBounce, 0, -50, 1);//
            dnn.dom.doTween(ctl.src + 'h', ctl, 'height', dnn.easing.easeOutBounce, ctl.offsetHeight, 50, 1, 10);
            dnn.dom.doTween(ctl.src + 'w', ctl, 'width', dnn.easing.easeOutBounce, ctl.offsetWidth, 50, 1, 10);
            m_Description.style.display = 'none';
        }
    }
}
MyCompany.ImageExplorer.registerClass('MyCompany.ImageExplorer');

